<template>
    <div class="color-picker">
      <div 
        class="color-preview"
        :style="{ backgroundColor: colorValue }"
      ></div>
      
      <!-- 添加 @change 事件处理实时更新 -->
      <input
        type="color"
        v-model="colorValue"
        class="color-input"
      >
      
      <!-- 现在会实时更新 -->
      <span class="color-value">{{ colorValue }}</span>
    </div>
</template>
  
<script setup>
import { computed } from 'vue'

const props = defineProps({
modelValue: {
    type: String,
    default: '#000000'
}
})

const emit = defineEmits(['update:modelValue'])

// 使用计算属性简化双向绑定
const colorValue = computed({
get: () => props.modelValue,
set: (value) => emit('update:modelValue', value)
})
</script>

<style scoped>
.color-picker {
display: flex;
align-items: center;
gap: 10px;
position: relative;
}

.color-preview {
width: 40px;
height: 40px;
border: 2px solid #ddd;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s;
}

.color-preview:hover {
transform: scale(1.05);
}

.color-input {
position: absolute;
left: 0;
top: 0;
width: 40px;
height: 40px;
opacity: 0;
cursor: pointer;
}

.color-value {
font-family: monospace;
font-size: 14px;
user-select: none;
}
</style>